<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" accept="image/jpg,image/png,image/jpeg" id="btn">
</body>
<!-- 把对应的图片（缩小）放到canvas上 -->
<script>
    let inp = document.getElementById('btn');
    inp.onchange = function(e) {
        let reader = new FileReader(); //FileReader读取整个文件的内容
        let file = e.target.files[0]; //拿到用户选中的文件（文件信息在Files[0]中）
        // 将文件转成base64
        reader.onload = function(e) {
            let url = e.target.result; //对应的图片的base64
            let img = new Image();
            img.src = url;
            document.body.appendChild(img)
            compress(url); //压缩图片
        }
        reader.readAsDataURL(file); //读取base（将file[0]中的信息转换为base64方法读取）
    }

    function compress(base_64) {
        let img = new Image();
        img.src = base_64;
        img.onload = function() {
            let canvas = document.createElements('canvas');
            // 获取原始尺寸通常用innerWidths属性或width()方法，但是给图片添加width样式，获取元素宽度不是想要的宽度，因为innerWidth或width()获取的元素盒模型的实际渲染宽度，而不是图片的原始宽度。
            // 使用naturalWidth和naturalHeight去获取图片的原始尺寸，考虑兼容问题，采用new Image()去获取图片的原始尺寸。使用该方法可以获取图片的原始尺寸，通常在图片的放大缩小，动态生成图片处需要用到此方法
            canvas.width = img.naturalWidth / 2;
            canvas.height = img.naturalHeight / 2;
            //绘画canvas
            let ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            let img_compressed = canvas.toDataURL('image/jpeg', 0.2); //把canvas转成png图片
            let img2 = new Image();
            img2.src = img_compressed;
            document.body.appendChild(img2);
        }
    }
</script>

</html>